<!--
 * @Author: 山有扶苏 2684362688@qq.com
 * @Date: 2023-03-02 10:55:36
 * @LastEditors: 锡诚 3343785462@qq.com
 * @LastEditTime: 2023-03-06 22:57:34
 * @FilePath: \专业见习1\vue-project\src\views\MyView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>

import { createApp } from 'vue';
import { Icon } from 'vant';

import { Cell, CellGroup } from 'vant';

const app = createApp();
app.use(Cell);
app.use(CellGroup);
app.use(Icon);

let data_icon = [
    {
        icon :"https://dsfs.oppo.com/archives/201912/201912020712185de4f76eba47b.png?x-oss-process=image/format,webp"
        ,
        text : "服务网点"
    },
    {
        icon :"https://dsfs.oppo.com/archives/201912/201912020712065de4f79ee379f.png?x-oss-process=image/format,webp"
        ,
        text : "保障服务"
    },
    {
        icon :"https://dsfs.oppo.com/archives/202211/2022110204114563622dc116baa.png?_w_=90&_h_=90&x-oss-process=image/format,webp"
        ,
        text : "定制手机壳"
    },
    {
        icon :"https://dsfs.oppo.com/archives/201912/201912020712115de4f7df611f6.png?x-oss-process=image/format,webp"
        ,
        text : "维修服务"
    },
    {
        icon :"https://dsfs.oppo.com/archives/202109/20210926020942615015aec6b9b.png?_w_=90&_h_=90&x-oss-process=image/format,webp"
        ,
        text : "收货地址"
    },
    {
        icon :"https://dsfs.oppo.com/archives/202109/2021092603093261501b085cce0.png?_w_=90&_h_=90&x-oss-process=image/format,webp"
        ,
        text : "换新/回收"
    },
    {
        icon :"https://dsfs.oppo.com/archives/202106/2021060211064460b6f768514e6.png?_w_=90&_h_=90&x-oss-process=image/format,webp"
        ,
        text : "学生优惠"
    },
    {
        icon :"https://dsfs.oppo.com/archives/202210/20221031051004635f92cc070bb.png?_w_=90&_h_=90&x-oss-process=image/format,webp"
        ,
        text : "价格保护"
    },    
];

</script>

<template>
<div class="app_top">   
    <div class="head_inform">
        <div class="top_head">
            <div class="img_left">
                <van-image 
                round
                width="62"
                height="62"
                src = "https://uc-avatar-cn.heytapimage.com/titans-usercenter-avatar-bucket-cn/avatar/7.png?imgModifyTime=null&x-oss-process=image/format,webp"/>
            </div>  
            
            <div class="top_writ_right">
                <div class="writ_user">
                    <span>盒马鲜生</span>
                </div>

                <div class="writ_id">
                    <span>账号：177****6666</span>
                </div>
            </div>
        </div>
    </div>
    <div class="qw">
        <div class="qw_left">
            <div class="qw_left_top">
                3
            </div>
            <div class="qw_left_bottom">
                <span>卡券</span>
            </div>
        </div>

        <div class="qw_right">
            <div class="qw_right_top">
                5
            </div>
            <div class="qw_right_bottom">
                <span>积分</span>
            </div>
        </div>
    </div>
</div> 
<div class="order-header">
    <div class="cell_title">
        <span>我的订单</span>
    </div>

    <div class="cell_value">
        <span>全部订单</span>
    </div>

    <div class="cell_icon"> 
        <van-icon name="arrow" size="17px" color="#666666" />
    </div>

</div>

<div>
<van-grid 
    :column-num="5"
    icon-size="24" 
    :border="false" 
    class="grid-list">
    <van-grid-item icon="balance-pay" text="待付款" class="order_item_bd"/>
    <van-grid-item icon="todo-list-o" text="待发货" class="order_item_bd"/>
    <van-grid-item icon="logistics" text="已发货" class="order_item_bd"/>
    <van-grid-item icon="chat-o" text="待评价" class="order_item_bd"/>
    <van-grid-item icon="after-sale" text="退换/售后" class="order_item_bd"/>
</van-grid>
</div>

<div class="order_titile">
    <span>常用工具</span>
</div>

<div class = "grid-module">
<van-grid
    icon-size="31"
    column-num="4"
    :border="false"
    >
<van-grid-item
    v-for="i in data_icon"
    :key="i"
    :icon="i.icon"
    :text="i.text"
/>
</van-grid>
</div>

<div class="bk">
    
</div>

<div class="writ">
    <div class="writ_left">
        <van-icon name="cart-circle-o" />
        <span>下载 App</span>
    </div>

    <div class="writ_right">
        <van-icon name="smile-o" />
        <span> 退出登录</span>
    </div>    
</div>

<div class="db">
    <div class="db_top">
        <span class="db_top_1">营业执照</span>
        <span class="db_top_2">隐私政策</span>
        <span class="db_top_3">用户协议</span>
    </div>

    <div class="db_bottom">
        <span>©2005 - 2023 OPPO 版权所有 粤ICP备14056724号</span>
    </div>
</div>

</template>

<style lang="less" scoped>

.order-header{
    display: flex;
    padding: 12px 17px;
    width: 342px;
    height: 23px;

    .cell_title{
        float: left;
        height: 23px;
        width: 272px;
        span{
            color: #000000;
            font-size: 15px;
            width: 60px;
            height: 17px;
        }
    }

    .cell_value{
        // float: right;
        height: auto;
        width: auto;
        span{
            color: #666666;
            font-size: 13px;
            height: 14.4px;
            width: 52px;
        }
    }
    .cell_icon{
        float: right;
        height: auto;
        width: auto;
    }
}

.grid-list{
    width: 351px;
    height: 64px;
    padding: 0px 12px;
    margin-top:  7.5px;

    .order_item_bd{
        height: 64px;
        width: 74px;
        padding: 0px;
        margin: 0px;
        // font-size: 58px 13px;
    }
}

.grid-module{
    padding: 0 12px;
    background-color: #ffffff;
    padding-bottom: 20px;

    :deep(.van-grid-item__content--center) {
        padding-top: 6px;
    }
}

.order_titile{
    width: 342px;
    height: 23px;
    padding: 12px 17px;
    margin-top: 3px;
    margin-bottom: 9px;
}

.writ{
    display: flex;
    .writ_left{
        float: left;
        width: 187.6px;
        height: 28px;
        text-align: center;
        font-size: 13px;
        color: #333333;
        padding-top: 13px;
    }

    .writ_right{
        float: right;
        width: 187.6px;
        height: 28px;
        text-align: center;
        font-size: 13px;
        color: #333333;
        padding-top: 13px;
    }    
}

.db{
    padding-top: 14.5px;
    width: 375px;
    height: 71px;
    font-size: 12px;
    color: #666666;
    .db_top{
        text-align: center;
        .db_top_1{
            padding-right: 17px;
        }

        .db_top_2{
            padding: 0px 17px;
        }

        .db_top_3{
            padding-left: 17px;
        }
    }

    .db_bottom{
        width: 375px;
        height: 16px;
        margin-top: 10px;
        text-align: center;
    }
}
.app_top{
    height: 161px;
    width: 375px;
    background: url(E:\jiepu\chengyuemo1\vue-project\src\assets\bg.png);
    background-size: cover;
    
    .head_inform{
        display: flex;
        height: 62px;
        padding:21px 12px;
        .top_head{
            width: 351px;

            .img_left{
                float: left;
                width: 62px;
                height: 62px;
                padding-right: 10px;
            }

            .top_writ_right{
                height: 62px;
                .writ_user{
                    font-size: 17px;
                    color: #333333;
                    margin-top: 5px;
                }
                .writ_id{
                    margin-top: 8px;
                    font-size: 13px;
                    color: #666666;
                }
            }
        }
    }
    .qw{
        width: 351px;
        height: 40px;
        padding: 0px 12px;
        margin-bottom: 17px;
        .qw_left{
            margin-left :58.5px;;
            width: 117px;
            float: left;
            text-align: center;
            .qw_left_top{
                font-size: 15px;
                height: 15px;
                margin-bottom: 11.5px;
            }
            .qw_left_bottom{
                font-size: 13px;
                height: 13px;
            }
        }

        .qw_right{
            margin-right: 58.5px;
            float: right;
            width: 117px;
            text-align: center;
            .qw_right_top{
                font-size: 15px;
                height: 15px;
                margin-bottom: 11.5px;
            }
            .qw_right_bottom{
                font-size: 13px;
                height: 13px;
            }
        }
    }
}
.bk{
    height: 12px;
    width: 375px;
    background-color: #f7f8fa;
}


</style>

<style>
:root {
    --van-grid-item-text-color: #666666;
    --van-grid-item-icon-size: 24px;
    --van-grid-item-text-font-size: 13px;
    --van-grid-item-content-padding: 0px 0px;

}
</style>